import { compileToFunctions } from "./compiler/index";
import { callHook, mountedComponent } from "./lifecycle";
import { initState } from "./initState";
import { mergeOptions } from './util/options'
// let uid = 0
export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this;
    // console.log('[ this.constructor.options,options ] >', this.constructor.options,options)
    vm.$options = mergeOptions(this.constructor.options,options);
    // 生命周期
    callHook(vm,'beforeCreate')    
    // vm._uid = uid++
    // vue 渲染流程1 初始化
    initState(vm);
    callHook(vm,'created')   
    // 渲染模板 判断有没有el
    // vue 渲染流程2 模版编译
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };
  // 创建$mount
  Vue.prototype.$mount = function (el) {

    // console.log('[ el ] >', el)
    let vm = this;
    let optinons = vm.$options;
    el = document.querySelector(el);
    vm.$el = el;
    if (!optinons.render) {
      let template = optinons.template;
      if (!template && el) {
        el = el.outerHTML;
        // vue 渲染流程3 变成ast语法树
        // console.log('[ el ] >', el)
        let render = compileToFunctions(el)
        // 1.将render变成vnode
        // 2.将vnode变成真实的dom
        optinons.render = render
      }
    }
    
    // 挂载组件
    mountedComponent(vm, el)
  };
}

// ast语法树 { 可以操作js css 节点 }   vnode 只能操作节点
/**
 * {
 *  tag:"div",
 *  attrs:[{"id":"app"}]
 * }
 */
